<template>
    <div>
      <el-card class="box-card">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>系统中心</el-breadcrumb-item>
          <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button  type="primary" @click="dialogVisible = true" plain >添加会员</el-button>
        <el-table
          border
          :data="memberList"
          style="width: 100%">
          <el-table-column
            prop="code"
            label="用户id"
            width="150"
            align="center">
          </el-table-column>
          <el-table-column
            prop="humanFaceUrl"
            label="微信头像"
            width="130"
            align="center">
            <template slot-scope="scope">
<!--              {{scope.row.humanFaceUrl}}-->
              <img  v-if="scope.row.humanFaceUrl!=null" :src="scope.row.humanFaceUrl" width="50px" height="50px">
            </template>
          </el-table-column>
          <el-table-column
            prop="memberCode"
            label="会员码"
            width="130"
            align="center">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="昵称"
            width="130"
            align="center">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号"
            width="130"
            align="center">
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="130"
            align="center">
            <template slot-scope="scope">
              {{scope.row.sex|sexFit}}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="注册时间"
            width="150"
            align="center">
            <template slot-scope="scope">
              {{scope.row.createTime|createTimeFit}}
            </template>
          </el-table-column>
          <el-table-column
            prop="deleted"
            label="状态"
            width="135"
            align="center">
            <template slot-scope="scope">
              {{scope.row.deleted|deletedFit}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="190"
            fixed="right"
            align="center">
            <!--点击按钮 需要绑定@click的时间 例如 @click="add"-->
            <template slot-scope="scope">
              <el-button type="success" size="mini" plain v-if="scope.row.deleted==0" @click="editById(scope.row)">修改</el-button>
              <el-button type="warning"  size="mini"plain v-if="scope.row.deleted==0"  @click="delById(scope.row.id)">停用</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

        </div>

        <el-dialog title="添加会员" :visible.sync="dialogVisible" width="1000" @close="clean()">
          <el-form ref="memberForm" :model="memberForm" label-width="80px" :rules="rules">
            <el-row>
            <el-col :span="11">
              <el-form-item label="会员年龄" prop="age">
                <el-input v-model="memberForm.age"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="会员性别" prop="sex">
                <el-radio  v-model="memberForm.sex" :label="1">男</el-radio>
                <el-radio  v-model="memberForm.sex" :label="2">女</el-radio>
              </el-form-item>
            </el-col>
            </el-row>
            <el-row>
            <el-col :span="11">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="memberForm.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="memberForm.mobile"></el-input>
              </el-form-item>
            </el-col>
            </el-row>
            <el-row>
            <el-col :span="11">
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="memberForm.idCard"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="memberForm.realName"></el-input>
              </el-form-item>
            </el-col>
            </el-row>
            <el-row>
            <el-col :span="11">
              <el-form-item label="昵称" prop="userName">
                <el-input v-model="memberForm.userName"></el-input>
              </el-form-item>
            </el-col>
<!--              {{this.memberForm}}-->
              <el-col :span="11">

            <el-form-item label="头像">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:8001/member/uploadImg"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="memberForm.humanFaceUrl!=null" :src="memberForm.humanFaceUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible=false">取 消</el-button>
                 <el-button type="primary" @click="addMember">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改会员" :visible.sync="dialogVisible2" width="1000" @close="clean">
          <el-form ref="memberForm" :model="memberForm" label-width="80px" :rules="rules">
            <el-row>
              <el-col :span="11">
                <el-form-item label="会员年龄" prop="age">
                  <el-input v-model="memberForm.age"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="会员性别" prop="sex">
                  <el-radio v-model="memberForm.sex" :label="1">男</el-radio>
                  <el-radio v-model="memberForm.sex" :label="2">女</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="memberForm.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="手机号" prop="mobile">
                  <el-input v-model="memberForm.mobile"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="身份证号" prop="idCard">
                  <el-input v-model="memberForm.idCard"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="真实姓名" prop="realName">
                  <el-input v-model="memberForm.realName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="昵称" prop="userName">
                  <el-input v-model="memberForm.userName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="头像">
                  <el-upload
                    class="avatar-uploader"
                    action="http://localhost:8001/member/uploadImg"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="memberForm.humanFaceUrl!=null" :src="memberForm.humanFaceUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2=false">取 消</el-button>
                 <el-button type="primary" @click="updateMember">确 定</el-button>
            </span>
        </el-dialog>

      </el-card>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        name: "MemberList",
        data(){
            return{
                memberList:[],
                page:{
                    currentPage:0,
                    pageSize:5
                },
                total:0,
                dialogVisible:false,
                memberForm:{humanFaceUrl:''},
                dialogVisible2:false,
                rules:{
                    age:[
                        { required: true, message: '年龄不能为空'},
                        { pattern: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/, message: '年龄范围1-120' }
                    ],
                    sex:[
                        { required: true, message: '请输入性别', trigger: 'blur' },
                    ],
                    email:[
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
                        {validator: this.memberForm, trigger: 'blur'}
                    ],
                    mobile:[
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        {  min:11 ,max: 11, message: '手机号为11位', trigger: 'blur' },
                    ],
                    idCard:[
                        { required: true, message: '身份证不能为空'},
                        {min:18,max:18,message: '必须是18位'},
                        {pattern:/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,message: '请输入正确格式'}
                    ],
                    realName:[
                        { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    ],
                    userName:[
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                    ]
                }
            }
        },
        methods:{

            searchMember:function () {
                this.$http.post("/member/getMemberByPage?currentPage="+this.page.currentPage+'&pageSize='+this.page.pageSize).then((res)=>{

                    this.memberList = res.data.result.records;
                    this.total=res.data.result.total;
                })
            },
            //实现分页
            //每页记录数
            handleSizeChange:function(val){
                this.page.pageSize = val
                this.searchMember()
            },
            //当前页
            handleCurrentChange:function(val){
                this.page.currentPage = val
                this.searchMember()
            },
            handleAvatarSuccess(res, file) {//上传完成后回调

                this.memberForm.humanFaceUrl = res.result.url;
              alert(this.memberForm.humanFaceUrl)
            },
            beforeAvatarUpload(file) {//=,=== 和 == 比较的是内容
                const isJPG = file.type === 'image/jpeg'|| file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //逻辑删除
            delById:function (id) {

              this.$confirm('此操作将永久停用该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$http.post('/member/delMember?id='+id).then((res)=>{
                  this.$message({
                    type: 'success',
                    message: '禁用成功!'
                  });
                  this.searchMember();
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消禁用'
                  });
                });
                })
            },
            clean:function(){
                this.memberForm={};
            },
            addMember:function () {

              if (!(/^(?:[1-9][0-9]?|1[01][0-9]|120)$/).test(this.memberForm.age)){
                this.$message.error("年龄范围1-120!");
                return;
              }
              if (!(/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/).test(this.memberForm.idCard)){
                this.$message.error("请输入正确格式的身份证!");
                return;
              }
              if (!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/).test(this.memberForm.email)){
                this.$message.error("请输入正确格式的邮箱!");
                return;
              }

                this.$http.post('member/staffMemberRegister?age='+this.memberForm.age+
                    '&sex='+this.memberForm.sex+
                    '&email='+this.memberForm.email+
                    '&mobile='+this.memberForm.mobile+
                    '&idCard='+this.memberForm.idCard+
                    '&realName='+this.memberForm.realName+
                    '&userName='+this.memberForm.userName+
                    '&humanFaceUrl='+this.memberForm.humanFaceUrl).then((res)=>{
                    if (res.data.success) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.clean();
                        this.dialogVisible=false;
                    }else {
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                    this.searchMember();
                })
            },
            //修改回显
            editById:function(row){
                this.dialogVisible2=true;
                this.memberForm=row;
            },

            //修改信息
            updateMember:function(){

              if (!(/^(?:[1-9][0-9]?|1[01][0-9]|120)$/).test(this.memberForm.age)){
                this.$message.error("年龄范围1-120!");
                return;
              }
              if (!(/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/).test(this.memberForm.idCard)){
                this.$message.error("请输入正确格式的身份证!");
                return;
              }
              if (!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/).test(this.memberForm.email)){
                this.$message.error("请输入正确格式的邮箱!");
                return;
              }
                this.$http.post('member/updateMember?id='+this.memberForm.id+
                    '&age='+this.memberForm.age+
                    '&sex='+this.memberForm.sex+
                    '&email='+this.memberForm.email+
                    '&mobile='+this.memberForm.mobile+
                    '&idCard='+this.memberForm.idCard+
                    '&realName='+this.memberForm.realName+
                    '&userName='+this.memberForm.userName+
                    '&humanFaceUrl='+this.memberForm.humanFaceUrl).then((res)=>{
                    if (res.data.success) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.clean();
                        this.dialogVisible2=false;
                    }else {
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                    this.searchMember();
                })
            },
        },
        mounted(){
            this.searchMember()
        },
        filters:{
            createTimeFit:function (val) {
                return moment(val).format("YYYY-MM-DD HH:mm:ss")
            },

            deletedFit:function (val) {
                if (val==0){
                    return "活跃"
                }
                if (val==1){
                    return "停用"
                }
            },
            sexFit:function (val) {
                if (val==1){
                    return "男"
                }
                if (val==2){
                    return "女"
                }
            }
        }
    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 1280px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
